<template>
  <el-dialog v-model="visibleCurrent" @close="dialogClose" title="客户联系人" width="60%" append-to-body>
    <el-form class="custom-form" :model="searchForm" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="分公司" prop="empBranchId">
            <el-select
              v-model="searchForm.empBranchId"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in branchOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门组" prop="empDepartGroupId">
            <el-select
              v-model="searchForm.empDepartGroupId"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in branchOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="部门" prop="empDepartId">
            <el-select
              v-model="searchForm.empDepartId"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in branchOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="科室" prop="empOfficeId">
            <el-select
              v-model="searchForm.empOfficeId"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in branchOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工号" prop="empNo">
            <el-input v-model="searchForm.empNo" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名" prop="empName">
            <el-input v-model="searchForm.empName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center" class="mb10">
        <el-button type="primary">查询</el-button>
      </el-row>
    </el-form>
    <el-table
      :data="tableList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="客户名称" prop="clientName" min-width="120" show-overflow-tooltip />
      <el-table-column label="人员姓名" prop="personName" min-width="120" show-overflow-tooltip />
      <el-table-column label="部门" prop="personDept" min-width="120" show-overflow-tooltip />
      <el-table-column label="职位" prop="personTitle" min-width="120" show-overflow-tooltip />
      <el-table-column label="电话" prop="personPhone" min-width="120" show-overflow-tooltip />
      <el-table-column label="手机号" prop="personMobile" min-width="120" show-overflow-tooltip />
      <el-table-column label="传真" prop="personFax" min-width="120" show-overflow-tooltip />
      <el-table-column label="邮箱" prop="personMail" min-width="120" show-overflow-tooltip />
    </el-table>
    <template #footer>
      <el-row justify="center">
        <el-button @click="dialogClose">取消</el-button>
        <el-button @click="confirmSelection" type="primary">确定</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script setup>
const emits = defineEmits(['update:visible', 'update:branchList', 'confirm']);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  branchList: {
    type: Array,
    default: [],
  },
});
const branchOptions = [{label: '总公司', value: 1}]
const searchForm = reactive({
  pageNo: 1,
  pageSize: 10,
  empBranchId: "",
  empDepartGroupId: "",
  empDepartId: "",
  empOfficeId: "",
  empNo: "",
  empName: "",
})
const tableList = ref([
  {clientName: '张晓军', personName: 'zhangxiaojun', personDept: '河北中心支公司', personTitle: '监理工程师', personPhone: '75454553', personMobile: '132XXXX5698', personFax: '12345', personMail: '132XXXX5698@163.com'},
  {clientName: '张晓军', personName: 'zhangxiaojun', personDept: '河北中心支公司', personTitle: '监理工程师', personPhone: '75454553', personMobile: '132XXXX5698', personFax: '12345', personMail: '132XXXX5698@163.com'},
  {clientName: '张晓军', personName: 'zhangxiaojun', personDept: '河北中心支公司', personTitle: '监理工程师', personPhone: '75454553', personMobile: '132XXXX5698', personFax: '12345', personMail: '132XXXX5698@163.com'},
  {clientName: '张晓军', personName: 'zhangxiaojun', personDept: '河北中心支公司', personTitle: '监理工程师', personPhone: '75454553', personMobile: '132XXXX5698', personFax: '12345', personMail: '132XXXX5698@163.com'},
])

let selectionBranch = reactive([])
const handleSelectionChange = (selection) => {
  selectionBranch = selection
}
const confirmSelection = ()=>{
  const arr = selectionBranch.map(item => toRaw(item))
  emits("update:branchList", arr);
  emits("confirm", arr);
  dialogClose()
}
const visibleCurrent = ref(false)
watch(() => props.visible, (newValue) => {
  visibleCurrent.value = newValue
});
const dialogClose = ()=> {
  emits("update:visible", false);
}
</script>

<style>
</style>